import React,{ Component } from 'react'
import { Form, Icon, Input, Button, Checkbox, Row, Col } from 'antd'
import Wrapper from '../login/Wrapper'
import styles from '../login/form.scss'
import regExp from '@/constants/regExp'

const FormItem = Form.Item;

const RegisterForm = (props) => {

  const { getFieldDecorator } = props.form;
  const {
    validateCodeEnable,
    validateCodeCountDown,
    registerButtonLoading,
    onChangePhoneNum,
    onChangeValidateCode,
    onChangeCompany,
    onChangeName,
    onGetValidateCode
  } = props
      
  return (
    <Row type="flex" justify="center" style={{paddingTop: 50,paddingLeft: 24, paddingRight: 24}} >
      <Col span={24}>
        <Row type="flex" align="middle" className={styles["header"]}>
          <Col span={12}>
            <div className={styles["login-title"]}>注册</div>
          </Col>
          <Col span={12}>
            <Row type="flex" justify="end">
              <Button onClick={props.onAccountLogin} className={styles["register-button"]} type="primary">已有账户登录</Button>
            </Row>
          </Col>
        </Row>
      </Col>
      <Col span={24}>
        <Form hideRequiredMark className={styles["login-form"]}>
          <FormItem labelCol={{span: 4}} wrapperCol={{span: 18}} label="手机号" colon={false}>
            {getFieldDecorator('phoneNum', {
                rules: [{ required: true, message: '请输入手机号!' },{ message: '手机号格式不正确!', pattern:regExp.phone }],
            })(
              <Input 
                onChange={onChangePhoneNum}
                prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} 
                placeholder="手机号" 
              />
            )}
          </FormItem>
           <FormItem labelCol={{span: 4}} wrapperCol={{span: 18}} label="验证码" colon={false}>
            <Row gutter={24}>
              <Col span={12}>
                {getFieldDecorator('validateCode', {
                  rules: [{ required: true, message: '请输入验证码!' }],
                })(
                  <Input 
                    onChange={onChangeValidateCode}
                    prefix={<Icon type="key" style={{ color: 'rgba(0,0,0,.25)' }} />} 
                    placeholder="验证码" 
                  />
                )}
              </Col>
              <Col span={12} style={{ textAlign: 'right' }}>
                <Button 
                  type="primary" 
                  ghost={true}
                  disabled={!validateCodeEnable} 
                  onClick={() =>{
                    props.form.validateFields(['phoneNum'], (error) => 
                       !error && onGetValidateCode()
                    )} 
                  }
                >
                  获取验证码 {validateCodeCountDown}
                </Button>
              </Col>
            </Row>
          </FormItem> 
          <FormItem labelCol={{span: 4}} wrapperCol={{span: 18}} label="公司" colon={false}>
            {getFieldDecorator('company', {
              rules: [{ required: true, message: '请输入公司!' }],
            })(
              <Input 
                onChange={onChangeCompany}
                prefix={<Icon type="team" style={{ color: 'rgba(0,0,0,.25)' }} />} 
                placeholder="公司" 
              />
            )} 
          </FormItem>
          <FormItem labelCol={{span: 4}} wrapperCol={{span: 18}} label="姓名" colon={false}>
            {getFieldDecorator('name', {
              rules: [{ required: true, message: '请输入姓名!' }],
            })(
              <Input 
                onChange={onChangeName}
                prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} 
                placeholder="姓名" 
              />
            )} 
          </FormItem>

          <FormItem>
            <Button loading={registerButtonLoading} type="primary" onClick={() =>{
             props.form.validateFields((error) => 
                !error && props.onRegister()
              )
            } 
            } style={{width: '100%', height: 38}} className={styles["login-form-button"]}>
              注册
            </Button>
          </FormItem>
      
        </Form>
      </Col>
    </Row>
  )
}

let LR = Form.create({
  mapPropsToFields(props) {
    return {
      validateCode: Form.createFormField({
        value: props.validateCode,
      }),

      phoneNum:Form.createFormField({
        value: props.phoneNum,
      }),
      company: Form.createFormField({
        value: props.company,
      }),

      name:Form.createFormField({
        value: props.name,
      }),
    };
  }
})(RegisterForm)

LR = Wrapper(LR)

export default LR